<template>
  <div class="loginpage">
    <div class="logincont">
      <div class="loginlogo">酷音盛世运营后台</div>
      <div class="loginform">
        <Form
          ref="loginForm"
          :model="loginForm"
          :rules="loginFormRules"
          :label-width="80"
          size="large"
        >
          <FormItem label="用户名" prop="username">
            <Input type="text" v-model="loginForm.username" placeholder="请输入用户名" @on-enter="handleSubmit()"/>
          </FormItem>
          <FormItem label="密码" prop="userpwd">
            <Input type="password" v-model="loginForm.userpwd" placeholder="用户密码" @on-enter="handleSubmit()"/>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit()">登陆</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <p><a href="http://beian.miit.gov.cn/">豫ICP备19020126号-1</a></p>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";

export default {
  layout: "login",
  data() {
    return {
      loginForm: {
        username: "",
        userpwd: ""
      },
      loginFormRules: {
        username: [
          {
            required: true,
            message: "用户名不能为空哟",
            trigger: "blur"
          }
        ],
        userpwd: [
          {
            required: true,
            message: "登陆密码不能为空哟",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(_self) {
      const _this = _self || this
      _this.$refs["loginForm"].validate(valid => {
        if (valid) {
          _this.$axios
            .post(
              "/bm/opera/login",
              // "/api/login",
              qs.stringify({ account: _this.loginForm.username, userPassword: _this.loginForm.userpwd })
              // { account: _this.loginForm.username, userPassword: _this.loginForm.userpwd }
            )
            .then(res => {
              if (res.data.code == 200) {
                localStorage.setItem('userId', res.data.detail.id)
                localStorage.setItem('userName', res.data.detail.userName)
                localStorage.setItem('userAccount', res.data.detail.account)
                localStorage.setItem('userToken', res.data.detail.token)
                localStorage.setItem('ud', qs.stringify(res.data.detail))
                _this.$Message.success('您已成功登陆')
                // this.$store.dispatch('setData', res.data.detail)
                _this.$router.replace("/");
              } else {
                _this.$Message.error(res.data.description)
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          _this.$Message.error("表单验证失败");
        }
      });
    },
    keyPress() {
      this.$options.methods.handleSubmit(this)
    }
  }
};
</script>

<style lang="less" scoped>
.loginpage {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../static/loginbg1.jpg") no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;

  > p {
    position: absolute;
    bottom: 20px;
  }
}

.logincont {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 20px 40px;
  border-radius: 5px;

  .loginlogo {
    font-size: 20px;
    color: #333;
  }

  .loginform {
    display: flex;
    flex-direction: column;
  }

  .formitem {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
  }
}
</style>
